<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <title>企业外贸风险预警系统</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
  <style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

</style>
    <style>
        @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
html{
  height:100%;
}
body{
  text-align:center;
  background:url('images/bg.jpg')no-repeat;
  	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
  background-position:50% 50%;
  height:100%;
  font-family: 'Open Sans Condensed', sans-serif;
}
body:before {
	content: "";
	
	display: inline-block;
	vertical-align: middle;
}

#menu{
	display: inline-block;
  height:135px;
  width:80%;
	vertical-align: middle;
  white-space: nowrap;
}
#menu li {
position: relative;
  left:200px;
z-index: 2;
display: block;
float: left;
width: 15%;
height: 135px;
line-height: 220px;
margin-right: 1.42857%;
white-space: nowrap;
background-position: 50%;
}
.rocket {
background: url('images/rocket-large.png')no-repeat;
margin-left: 1.42857%;
}
.wine{
  background:url('images/wine-large.png')no-repeat;
}
.burger{
  background:url('images/burger-large.png')no-repeat;
}
.comment{
  background:url('images/comment-large.png')no-repeat;

}
.sport{
  background:url('images/sport-large.png')no-repeat;

}
.earth{
  background:url('images/earth-large.png')no-repeat;
}
#menu ul{
  position:relative;
}
#menu ul:after{
  content:"";
  display:block;
  clear:both;
}
#menu a{
  color:#D8D8D8;
  text-decoration:none;
  display:block;
  width:100%;
  height:100%;
  text-shadow: 0 -1px 0 #000;
}
#menu li:after {
content: "";
width: 9.5238%;
height: 100%;
position: absolute;
top: 0;
right: -9.5238%;
background: url('images/menu-bg.png');
}
.rocket:before {
content: "";
width: 9.5238%;
height: 100%;
position: absolute;
top: 0;
left: -9.5238%;
background: url('images/menu-bg.png');
border-radius: 5px 0px 0px 5px;
}
.earth:after{
  border-radius:0px 5px 5px 0px;
}
.current{
  position:absolute;
  top:-13px;
  left:8.92857%;
  margin-left: 150px;
  width:95px;
  height:165px;
  -webkit-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
-moz-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
-o-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
-ms-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
transition: all 400ms cubic-bezier(.16,1.23,.87,1.18);
}
.current-back{
  width:100%;
  height:100%;
  position:absolute;
  background:#c39449;
  border-radius:5px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.09);
  border-top: 2px solid rgba(255,255,255,0.1);
}
.top-arrow{
  position:absolute;
  overflow:hidden;
  width:100%;
  height:12px;
  top:13px;
  left:0;
  z-index:2;
}
.top-arrow:before{
  content:"";
  position:absolute;
  width:80%;
  height:10px;
  top:-10px;
  left:10%;
  border-radius:20%;
  box-shadow:0 0 10px black;
}
.top-arrow:after{
  content:"";
  position:absolute;
  width:0;
  height:0;
  top:0px;
  border-top:8px solid #c39449;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  margin-left:-6px;
  left:50%;
}

.bottom-arrow{
  position:absolute;
  overflow:hidden;
  width:100%;
  height:12px;
  bottom:17px;
  left:0;
  z-index:2;
}
.bottom-arrow:before{
  content:"";
  position:absolute;
  width:80%;
  height:10px;
  bottom:-10px;
  left:10%;
  border-radius:20%;
  box-shadow:0 0 10px black;
}
.bottom-arrow:after{
  content:"";
  position:absolute;
  width:0;
  height:0;
  bottom:0;
  border-bottom:12px solid #c39449;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  margin-left:-8px;
  left:50%;
}

.wine:hover ~ .current{
  left: 25%;
}

.comment:hover ~ .current{  
   left: 42%;
}

.earth:hover ~ .current{
  left: 58%;
}
        #page{
            max-height: 650px;
            min-height: 450px;
            border-width: 2px;
            border-style: ridge;
            border-color: #7F91B5;
            padding:10px;
            margin-top:1px;
            margin:-15px auto -40px auto;

        }

</style>
    <script src="js/prefixfree.min.js"></script>

</head>
<body>
<p></p>
<p></p>
  <div id="menu">

  <div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
  </div>

   <div>
      <div>
          <ul>
              <li class="rocket"><a href="">内控风险</a></li>
              <li class="wine"><a href="">汇率风险</a></li>
              <li class="comment"><a href="">信用风险</a></li>
              <li class="earth"><a href="">区域风险</a></li>
              <div class="current">
                  <div class="top-arrow"></div>
                  <div class="current-back"></div>
                  <div class="bottom-arrow"></div>
              </div>
          </ul>
      </div>
      <div class="middle_first_right">
          <div class="middle_first_rightdiv div1 ">
              <a class="middle_right_a1" href="#" target="_blank">
                  <i class="fa fa-home fa-2x fa-fw"></i>
                  <a href="login.html" target="_blank">登录</a>
              </a>
          </div>
          <div class="middle_first_rightdiv div2">
              <a class="middle_right_a1 middle_right_a2" href="#" target="_blank">
                  <i class="fa fa-smile-o fa-2x fa-fw"></i>
                  <a href="register.html" target="_blank">注册</a>

              </a>
          </div>

      </div>
       <div id="page">

       </div>
</iv>



</nav>

  <script src='js/none.js'></script>

  <script src="js/index.js"></script>

</body>

</html>